<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>个人中心</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/mobileSelect.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        html,
        body {
            background: #fff;
        }
    </style>
</head>
<body>
<div class="app" v-cloak>
    <header>
        <div class="flex-x-sb">
            <span class="iconfont goback" @click="back">&#xe66f;</span>
            <div class="title">
                个人中心
            </div>
        </div>
    </header>
    <div class="pt">
        <div class="linGery"></div>
        <div class="bgf plr grzx">
            <div class="grzx-head-portrait flex-x-sb" @click="upHeadImg">
                <div>头像</div>
                <img :src="userInfo.headUrl?userInfo.headUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/head_portrait.png'" alt="">
            </div>
            <div class="grzx-item flex-x-sb">
                <div>昵称</div>
                <div class="grzx-right">
                    <input type="text" placeholder="这里是昵称" v-model="oldNickName" maxlength="20" @change="updateNickName('change')" @blur="updateNickName('blur')">
                </div>
            </div>
            <div class="grzx-item flex-x-sb">
                <div>性别</div>
                <div class="grzx-right" id="sex">
                    <div>{{userInfo.sex===1?"男":"女"}}</div>
                    <span class="iconfont">&#xe666;</span>
                </div>
            </div>
            <div class="grzx-item flex-x-sb" @click="goChangePhone">
                <div>修改手机号</div>
                <div class="grzx-right">
                    <div>{{userInfo.phone}}</div>
                    <span class="iconfont">&#xe666;</span>
                </div>
            </div>
            <div class="grzx-item flex-x-sb">
                <div>QQ</div>
                <div class="grzx-right">
                    <div>{{userInfo.qqNickName?"已绑定":"未绑定"}}</div>
                    <span class="iconfont">&#xe666;</span>
                </div>
            </div>
            <div class="grzx-item flex-x-sb">
                <div>微信</div>
                <div class="grzx-right">
                    <div>{{userInfo.weChatNickName?"已绑定":"未绑定"}}</div>
                    <span class="iconfont">&#xe666;</span>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/flexible.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/vue.min.js"></script>
<script src="../../script/iconfont.js"></script>
<script src="../../script/mobileSelect.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/restful.js"></script>
<script>
    apiready = function () {
        api.addEventListener({
            name: 'updatePhoneSuccess'
        }, function (ret, err) {
            vm.getUserInfo();
        });
        vm = new Vue({
            el: '.app',
            data: {
                message: '',
                sex: '请选择',
                userInfo: {
                    headUrl: '',
                    phone: '',
                    qqNickName: '',
                    weChatNickName: '',
                    nickName: '',
                    sex: '',
                },
                oldNickName: '',
                updateLock: false
            },
            mounted: function () {
                let vm = this
                new MobileSelect({
                    trigger: '#sex',
                    wheels: [{data: ['女', '男']}],
                    triggerDisplayData: false,
                    position: 0,
                    callback: function (indexArr, data) {
                        vm.userInfo.sex = indexArr[0]
                        vm.updateUserInfo(null, null, null, indexArr[0])
                    }
                });
                vm.getUserInfo()
            },
            methods: {
                upHeadImg() {
                    const vm = this;
                    upImgCommon(function (ret) {
                        if (ret && ret.code === RESPONSE_OK) {
                            const resourceInfo = ret.data;
                            vm.userInfo.headUrl = resourceInfo.imagePath
                            vm.updateUserInfo(resourceInfo.resourceId, resourceInfo.imagePath, null, null)
                        } else {
                            toastBottom(ret ? ret.msg : '');
                        }
                    })
                },
                goChangePhone() {
                    api.openWin({
                        name: 'change_phone_win',
                        url: 'change_phone_win.html',
                        bounces: false,
                        pageParam: {
                            key: 'value'
                        }
                    });
                },
                back() {
                    api.closeWin();
                },
                getUserInfo() {
                    const vm = this;
                    fnGet(interfaces.USER_MODULE.GET_USER_INFO, {}, true, function (ret, err) {
                        if (ret && ret.code === RESPONSE_OK) {
                            vm.userInfo = ret.data;
                            vm.oldNickName = vm.userInfo.nickName
                        } else {
                            toastBottom(ret ? ret.msg : '');
                        }
                    });
                },
                updateNickName: function (type) {
                    const vm = this;
                    if (vm.updateLock) {
                        return false;
                    }
                    if (!vm.oldNickName) {
                    }
                    if (vm.userInfo.nickName === vm.oldNickName) {
                        return false
                    }
                    vm.updateLock = true;
                    vm.updateUserInfo(null, null, vm.oldNickName, null)
                },
                /**
                 *
                 * @param headMediaId 头像资源ID
                 * @param headUrl 头像URL
                 * @param nickName 昵称
                 * @param sex 性别
                 */
                updateUserInfo: function (headMediaId, headUrl, nickName, sex) {
                    const param = {headMediaId: headMediaId, headUrl: headUrl, nickName: nickName, sex: sex}
                    fnPut(interfaces.USER_MODULE.UPDATE_USER_INFO, param, false, function (ret, err) {
                        if (ret && ret.code === RESPONSE_OK) {
                            api.sendEvent({name: 'updateUserInfo'});
                            toastBottom("修改成功!");
                        } else {
                            toastBottom(ret ? ret.msg : '');
                        }
                        vm.updateLock = false;
                    });
                }
            },
        })
    }
</script>
</body>
</html>
